<template>
  <div class="app-container put-in-store">
    <el-form ref="form" :model="form" :rules="rules" label-width="90px" style="width:450px">
      <el-form-item label="条码" prop="barCode">
        <el-input v-model="form.barCode" ref="barCode" @keyup.enter.native="nextGetFocus('frame')"></el-input>
      </el-form-item>
      <el-form-item label="车架" prop="frame">
        <el-input v-model="form.frame" ref="frame" @keyup.enter.native="nextGetFocus('motor')"></el-input>
      </el-form-item>
      <el-form-item label="电机" prop="motor">
        <el-input v-model="form.motor" ref="motor" @keyup.enter.native="nextGetFocus('battery')"></el-input>
      </el-form-item>
      <el-form-item label="电池" prop="battery">
        <el-input v-model="form.battery" ref="battery" @keyup.enter.native="nextGetFocus('vehicle')"></el-input>
      </el-form-item>
      <!-- 可添加回车提交表单事件 -->
      <el-form-item label="整车" prop="vehicle">
        <el-input v-model="form.vehicle" ref="vehicle"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data(){
    return{
      form: {
        barCode: '',
        frame: '',
        motor: '',
        battery: '',
        vehicle: ''
      },
      rules: {
        barCode: [
          { required: true, message: '请录入条码', trigger: 'blur' }
        ],
        frame: [
          { required: true, message: '请录入车架', trigger: 'blur' }
        ],
        motor: [
          { required: true, message: '请录入电机', trigger: 'blur' }
        ],
        battery: [
          { required: true, message: '请录入电池', trigger: 'blur' }
        ],
        vehicle: [
          { required: true, message: '请录入车辆ID', trigger: 'blur' }
        ]
      }
    }
  },
  mounted(){
    this.$refs.barCode.focus()
  },
  methods:{
    //下一个输入框获取焦点
    nextGetFocus(nextRef){
      this.$refs[nextRef].focus()
      console.log(nextRef+"获取焦点");
    },
    //保存表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    reset() {
      this.form = {
        barCode: '',
        frame: '',
        motor: '',
        battery: '',
        vehicle: ''
      };
      this.resetForm("form");
    }
  }
}
</script>

<style scoped lang="scss">
.put-in-store{
  display: flex;
  justify-content: center;
}
</style>